<template>
    <div>
        <!-- 余额不足弹窗 -->
        <a-modal v-model:visible="modalVisible" title="余额不足" ok-text="去充值" @ok="handleRecharge">
            <div>
                <div class="fz-14 mb-8 col-8A93A7">需支付金额: <span class="col-money">￥{{ (parseFloat(checkData?.instanceAmount) +
                    parseFloat(checkData?.storageAmount)).toFixed(2) || 0 }}</span></div>
                <div class="fz-14 mb-8 col-8A93A7">账户可用余额： <span class="col-money">￥{{ checkData?.balance || 0 }}</span></div>
                <span class="col-223354 fz-14"><svg-icon name="icon_info" style="width:14px;height:14px;margin-right: 4px;color: #F5222D;" />当前余额扣除下一小时按量付费实例费用后<span class="col-warn">不足以支付</span>当前实例订单</span>
                <div class="fz-14 mb-8 col-8A93A7">运行中按量付费费用： <span class="col-money">￥{{ checkData?.nextPaygAmount || 0 }}</span></div>
            </div>
        </a-modal>
    </div>
</template>

<script setup>
import { defineProps, defineEmits, computed, ref } from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter()

const props = defineProps({
    modelValue: {
        type: Boolean,
    },
    checkData: {
        type: Object,
        default: {}
    }
});

const emit = defineEmits(['update:modelValue']);
const modalVisible = computed({
    get: () => props.modelValue,
    set: v => emit('update:modelValue', v),
});

// 去充值
const handleRecharge = () => {
    emit('update:modelValue', false)
    router.push('/recharge')
}

</script>

<style scoped lang="less">
.instance-modal {
    font-size: 14px;
    color: #646F87;

    &>div {
        margin-bottom: 8px;
    }
}
</style>

